<template>
    <div class="single-table-container">
        <div class="search-form-wrapper">
            <div class="title">角色管理</div>
            <div class="seach_list">
                <el-input :prefix-icon="Search" placeholder="角色名称/编码" v-model="searchForm.query" clearable></el-input>
                <el-select v-model="searchForm.status" placeholder="请选择" clearable>
                    <el-option v-for="item in statusOptions" :key="item.dictValue" :label="item.dictLabel"
                        :value="item.dictValue">
                    </el-option>
                </el-select>
                <el-button type="primary"  @click="searchTable">查询</el-button>
                <el-button type="primary" plain @click="addClick">新增</el-button>
            </div>
        </div>
        <div class="single-table">
            <el-table ref="table" v-loading="tableLoading" height="100%" :data="tableData" stripe tooltip-effect="dark"
                :header-cell-style="{ background: '#f5f7fa', fontWeight: 'bold', color: '#303133' }"
                highlight-current-row border>
                <el-table-column type="index" header-align="center" align="center" label="序号"
                    width="60"></el-table-column>
                <el-table-column prop="roleCode" label="角色编码" show-overflow-tooltip></el-table-column>
                <el-table-column prop="name" label="角色名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="remark" label="描述" show-overflow-tooltip></el-table-column>
                <el-table-column prop="status" label="状态" show-overflow-tooltip width="60"
                    :formatter="tableformatterStatus"></el-table-column>
                <el-table-column prop="createDate" label="创建时间" show-overflow-tooltip
                    :formatter="formartDateEmpty"></el-table-column>
                <el-table-column prop="updateDate" label="修改时间" show-overflow-tooltip
                    :formatter="formartDateEmpty"></el-table-column>
                <el-table-column label="操作" header-align="center" align="center" min-width="100">
                    <template #default="scope">
                        <div class="flex-space">
                            <el-button  v-if="scope.row.roleCode != super_admin_code" type="primary" link
                                @click="editRow(scope.row)">编辑</el-button>
                            <el-button  type="primary" link @click="authorizationMenu(scope.row)">授权菜单</el-button>
                            <el-button  type="primary" link @click="authorizationMember(scope.row)">授权人员</el-button>
                            <el-button  v-if="scope.row.roleCode != super_admin_code" class="g-red"
                                type="primary" link @click="deleteRow(scope.row)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="table-pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                :current-page="pages.current" :page-sizes="pages.pageSizeList" :page-size="pages.size"
                layout="total, sizes, prev, pager, next, jumper" :total="pages.total"></el-pagination>
        </div>
        <addOrEditRole ref="addOrEditRoleRef" @search-table="searchTable"></addOrEditRole>
        <authMenu ref="authMenuRef"></authMenu>
        <authMember ref="authMemberRef"></authMember>
    </div>

</template>
<script setup lang="ts" name="sysRole">
import addOrEditRole from "./_compoents/addOrEditRole.vue";
import authMember from "./_compoents/authMember.vue";
import authMenu from "./_compoents/authMenu.vue";
import { Search } from '@element-plus/icons-vue'
import { delNullProperty } from "@/utils/index.ts";
import { ref, onMounted, computed, h } from 'vue';
import { getRuleByPage, removeRuleById } from "@/api/sys/roleApi.ts";
import { formartDateEmpty } from "@/utils/";
import { ElMessage, ElMessageBox } from 'element-plus'
import useAppStore from '@/stores/modules/app';
import { super_admin_code } from "@/utils/auth";
const statusOptions = computed(() => useAppStore().sysDict.sys_status || [])

const addOrEditRoleRef = ref(addOrEditRole);
const authMenuRef = ref(authMenu);
const authMemberRef = ref(authMember);
const searchForm = ref({
    status: '',
    query: '',
});
const tableLoading = ref(false);
const tableData = ref([]);
const pages = ref({
    current: 1,
    size: 10,
    pageSizeList: [10, 20, 30, 50, 100],
    total: 0
})
/*生命周期 */
onMounted(() => {
    getTableData();
})
/*方法 */
const addClick = () => {
    // 新增
    addOrEditRoleRef.value.openLoad("add");
}
const editRow = (row: any) => {
    addOrEditRoleRef.value.openLoad("update", row);
}
const deleteRow = async (row: any) => {
    ElMessageBox.confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
        await deleteRowAction(row);
    })

}
const deleteRowAction = async (row: any) => {
    const id = row.id;
    tableLoading.value = true;
    const res: apiServerResponse = await removeRuleById(id)
    if (res.code == 200) {
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
        searchTable();
    }

    tableLoading.value = false;
}
const getTableData = async () => {
    tableLoading.value = true;
    let params = {
        current: pages.value.current,
        size: pages.value.size,
        ...delNullProperty(searchForm.value)
    }

    const res = await getRuleByPage(params)
    if (res.code == 200) {
        tableData.value = res.result.records;
        pages.value.total = res.result.total;
    }
    tableLoading.value = false;
}
const searchTable = () => {
    pages.value.current = 1;
    getTableData();
}
const handleSizeChange = (val: number) => {
    pages.value.size = val;
    getTableData();
}
const handleCurrentChange = (val: number) => {
    pages.value.current = val;
    getTableData();
}
const tableformatterStatus = (row: SysUserEntity) => {
    if (!row.status) {
        return '-';
    }
    const label = statusOptions.value?.find((item: SysDictDataEntity) => item.dictValue == row.status)?.dictLabel
    const success = 'el-tag el-tag--success el-tag--small el-tag--light'
    const danger = 'el-tag el-tag--danger el-tag--small el-tag--light'

    return h('span', { class: row.status == '1' ? success : danger },
        h('span', { class: 'el-tag__content' }, label));
}
const authorizationMenu = (row: SysUserEntity) => {
    authMenuRef.value.openLoad(row.id);
}
const authorizationMember = (row: SysUserEntity) => {
    authMemberRef.value.openLoad(row.id);
}
</script>
<style lang="scss" scoped>
.flex-space {
    display: flex;

    button {
        margin: auto;
        padding: 0;
    }
}
</style>